<!--
 * @Author: Dee Dee
 * @Date: 2023-08-14 14:45:18
 * @LastEditors: Dee Dee
 * @LastEditTime: 2023-08-16 11:16:46
 * @FilePath: /培训认证系统20230814/src/views/vadmin/home/components/partOne/left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <el-card class="stats-card">
    <el-row type="flex" justify="center" align="middle" style="margin-bottom:20px;">
      <el-col :xs="3" :sm="2" class="icon-col">
        <svg-icon icon-class='zip' :style="{ color: theme, fontSize: '28px' }" />
      </el-col>
      <el-col :xs="21" :sm="22" class="part1_title">我的培训</el-col>
    </el-row>
    <el-row class="stats-content">
      <el-col :xs="12" :sm="6" class="stat-item">
        <el-statistic group-separator="," :precision="0" :value="getTotalCount()" title="全部"></el-statistic>
      </el-col>
      <el-col :xs="12" :sm="6" class="stat-item">
        <el-statistic group-separator="," :precision="0" :value="getTotalCount()" title="进行中"></el-statistic>
      </el-col>
      <el-col :xs="12" :sm="6" class="stat-item">
        <el-statistic group-separator="," :precision="0" :value="getPassedCount()" title="已完成"></el-statistic>
      </el-col>
      <el-col :xs="12" :sm="6" class="stat-item">
        <el-statistic group-separator="," :precision="0" :value="getFailedCount()" title="待学习"></el-statistic>
      </el-col>
    </el-row>
    <div class="action-row">
      <el-button size="small" type="primary" round @click="goToTraining">去培训</el-button>
    </div>
  </el-card>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { listKnowledge } from "@/api/vadmin/course/course";

export default {
  name: "CourseStats",
  data() {
    return {
      loading: true,
    };
  },
  props: ["form"],
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },

  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listKnowledge({ chapter: this.chapter, course: this.course }).then(
        (response) => {
          this.list = response.results;
          this.loading = false;
        }
      );
    },
    goToTraining() {
      this.$router.push('/train/online');
    },
    // 安全获取通过数量
    getPassedCount() {
      return this.form && this.form.Passed ? this.form.Passed : 0;
    },
    // 安全获取失败数量
    getFailedCount() {
      return this.form && this.form.Failed ? this.form.Failed : 0;
    },
    // 安全获取总数
    getTotalCount() {
      const passed = this.form && this.form.Passed ? this.form.Passed : 0;
      const failed = this.form && this.form.Failed ? this.form.Failed : 0;
      return passed + failed;
    }
  },
};
</script>

<style lang="scss" scoped>
.stats-card {
  height: 100%;
}

.icon-col {
  text-align: center;
}

.stats-content {
  margin-bottom: 15px;
}

.stat-item {
  margin-bottom: 15px;
}

.action-row {
  text-align: center;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .icon-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
    
  .part1_title {
    font-size: 16px;
    font-weight: bold;
  }
    
  .action-row {
    .el-button {
      width: 100%;
      margin: 5px 0;
    }
  }
}
</style>
  